<template>
  <div class="card-wrap">
    <img :src="this.imgurl" class="card-img" />
    <div class="tip">在支付学车费用前，请将本二维码出示给门店客服</div>
    <div class="status">
      <div>使用状态:
        <span class="frame" v-if="(this.used === false)">未使用</span>
        <span class="frame" v-else>已使用</span>
      </div>
      <div style="margin-top:20px">折扣金额:
        <span class="frame">{{this.price + '元'}}</span>
      </div>
    </div>
    <p class="shuoming" @click="checkintroduce">查看"抵用券"使用说明</p>
    <cover v-show="cover" v-on:getimg="display" :type="this.type"></cover>
  </div>
</template>
<script type="text/ecmascript-6">
  import cover from 'components/cover/cover';
  export default {
    data() {
      return {
        price: '',
        imgurl: '',
        used: '',
        type: '',
        cover: ''
      };
    },
    created() {
      document.title = '使用抵用券';
      function audioAutoPlay(id) {
      var audio = document.getElementById(id);
        audio.pause();
        document.addEventListener('WeixinJSBridgeReady', function () {
          audio.pause();
        }, false);
        document.addEventListener('YixinJSBridgeReady', function() {
          audio.pause();
        }, false);
      }
      audioAutoPlay('Jaudio');
      setTimeout(function () {
        document.getElementById('loading').style.display = 'none';
      }, 500);
      this.$http.get('fiveques/getgrcode/?op_id=' + window.localStorage.opt_id).then((response) => {
        this.price = response.body.data.deduct_price;
        this.imgurl = response.body.data.img;
        this.used = response.body.data.has_used;
      });
    },
    methods: {
      checkintroduce() {
        this.cover = 'true';
        this.type = 'introduce';
      },
      display(msg) {
        this.cover = msg;
      }
    },
    components: {
      cover
    }
  };
</script>
<style lang="stylus" rel="stylesheet/stylus">
  .wrap:after
    background none
  .card-wrap
    width 100%
    text-align center
    bottom 0
    color #2F499D
    display: flex
    min-height 100%
    flex-direction: column
    justify-content: space-around
    .card-img
      width 60%
      height auto
      margin-left 20%
      margin-top 50px
    .tip
      text-align center
      width 80%
      margin-left 10%
      font-size 15px
      line-height 22px
      margin-top 20px
    .status
      width 80%
      height auto
      margin-top 30px
      text-align left
      margin-left 10%
      .frame
        display inline-block
        width 150px
        height 30px
        color #E1BE18
        background-color rgb(255,255,255)
        border-radius 15px
        font-size 16px
        line-height 30px
        text-align center
        margin-left 30px
        font-weight bold
    .shuoming
      position absolute
      bottom 0px
      font-size 15px
      height 40px
      text-decoration:underline
      width 50%
      margin-left 25%
</style>
